<template>
  <div class="match-card">
    <div class="card-header">
      <span class="match-number">桌号：{{ tableNumber }}</span>
    </div>
    <div class="player-info">
      <div class="player player-home">
        <div class="player-name">{{ currentRoundData?.home_player?.name || '-' }}</div>
        <div class="player-school">{{ matchData?.home_school_short_name || matchData?.home_school }}</div>
      </div>
      <div class="vs">VS</div>
      <div class="player player-away">
        <div class="player-name">{{ currentRoundData?.away_player?.name || '-' }}</div>
        <div class="player-school">{{ matchData?.away_school_short_name || matchData?.away_school }}</div>
      </div>
    </div>
    <div class="rounds">
      <!-- 当前轮次成绩 -->
      <div class="current-round">
        <div class="round-title">{{ selectedRound }}</div>
        <div class="round-scores">
          <span class="score home highlight" :class="{ 'penalty': currentRoundData?.home_player?.penalty }">
            {{ formatScore(currentRoundData?.home_player?.score, currentRoundData?.home_player?.unsolved) }}
          </span>
          <span class="score away highlight" :class="{ 'penalty': currentRoundData?.away_player?.penalty }">
            {{ formatScore(currentRoundData?.away_player?.score, currentRoundData?.away_player?.unsolved) }}
          </span>
        </div>
        <div class="round-result" v-if="currentRoundData?.winner_id">
          胜出：{{ getWinnerName(currentRoundData.winner_id) }}
        </div>
      </div>

      <!-- 其他轮次成绩 -->
      <div class="other-rounds" v-if="otherRounds.length > 0">
        <div v-if="otherRounds.length === 1" class="single-round">
          <span class="additional-round-title">{{ otherRounds[0].title }}成绩：</span>
          <span class="additional-score">
            {{ formatScore(otherRounds[0].data?.home_player?.score, otherRounds[0].data?.home_player?.unsolved) }} : 
            {{ formatScore(otherRounds[0].data?.away_player?.score, otherRounds[0].data?.away_player?.unsolved) }}
          </span>
        </div>
        <template v-else>
          <div class="additional-round" v-for="(round, index) in otherRounds" :key="index">
            <span class="additional-round-title">{{ round.title }}：</span>
            <span class="additional-score">
              {{ formatScore(round.data?.home_player?.score, round.data?.home_player?.unsolved) }} : 
              {{ formatScore(round.data?.away_player?.score, round.data?.away_player?.unsolved) }}
            </span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  matchData: {
    type: Object,
    required: true
  },
  roundData: {
    type: Object,
    required: true
  },
  selectedCubeType: {
    type: String,
    required: true
  },
  selectedRound: {
    type: String,
    required: true
  },
  tableNumber: {
    type: Number,
    required: true
  }
});

// 获取当前轮次数据
const currentRoundData = computed(() => {
  console.log('当前轮次数据:', props.roundData);
  return props.roundData || null;
});

// 获取其他轮次数据
const otherRounds = computed(() => {
  if (!props.matchData || !props.matchData.cube_types || !props.selectedCubeType) {
    return [];
  }

  // 获取当前轮次号 (1, 2, 3)
  let currentRoundNumber;
  if (props.selectedRound === '第一轮') {
    currentRoundNumber = 1;
  } else if (props.selectedRound === '第二轮') {
    currentRoundNumber = 2;
  } else if (props.selectedRound === '第三轮') {
    currentRoundNumber = 3;
  } else {
    currentRoundNumber = parseInt(props.selectedRound.replace(/[^0-9]/g, '')) || 1;
  }
  
  const rounds = [];
  const allRounds = props.matchData.cube_types[props.selectedCubeType]?.rounds || {};
  
  // 获取当前桌子的ID
  const tableId = props.roundData.table_id;
  if (!tableId) return [];
  
  // 如果当前是第一轮，只显示第二轮成绩
  if (currentRoundNumber === 1) {
    const roundData = allRounds.round2 && allRounds.round2[tableId];
    if (roundData) {
      rounds.push({
        title: '第二轮',
        data: roundData
      });
    }
    return rounds;
  }
  
  // 如果是其他轮次，显示所有不同的轮次
  const otherRoundNumbers = [1, 2, 3].filter(num => num !== currentRoundNumber);
  
  // 只显示其他轮次数据
  otherRoundNumbers.forEach(roundNum => {
    const roundKey = `round${roundNum}`;
    const roundData = allRounds[roundKey] && allRounds[roundKey][tableId];
    
    if (roundData) {
      rounds.push({
        title: `第${['一', '二', '三'][roundNum-1]}轮`,
        data: roundData
      });
    }
  });
  
  return rounds;
});

// 获取抽签结果
const drawResults = computed(() => props.matchData.draw_results || {});

// 格式化成绩显示
const formatScore = (score, unsolved) => {
  if (unsolved) return 'DNF';
  if (score === null || score === undefined) return '-';
  
  // 确保 score 是数字类型
  const numScore = parseFloat(score);
  if (isNaN(numScore)) return '-';
  
  return numScore.toFixed(3);
};

// 获取获胜者姓名
const getWinnerName = (winnerId) => {
  const homePlayer = currentRoundData.value?.home_player;
  const awayPlayer = currentRoundData.value?.away_player;
  
  if (homePlayer?.id === winnerId) return homePlayer.name;
  if (awayPlayer?.id === winnerId) return awayPlayer.name;
  return '-';
};
</script>

<style scoped>
.match-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
  padding: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.match-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.card-header {
  text-align: center;
  margin-bottom: 10px;
}

.match-number {
  font-size: 16px;
  font-weight: bold;
  color: #606266;
}

.player-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.player {
  text-align: center;
  flex: 1;
}

.player-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 3px;
  color: #409EFF;
  min-height: 18px;
}

.player-school {
  font-size: 12px;
  color: #67C23A;
  margin-top: 2px;
  text-align: center;
  min-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.draw-info {
  font-size: 11px;
  color: #67C23A;
}

.vs {
  margin: 0 8px;
  color: #909399;
  font-weight: bold;
}

.rounds {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.current-round {
  background: #F5F7FA;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.round-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
}

.round-scores {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.score {
  font-size: 12px;
  font-weight: normal;
  color: #909399;
  transition: all 0.3s ease;
}

.score.highlight {
  font-size: 20px;
  font-weight: bold;
}

.score.highlight.home {
  color: #409EFF;
}

.score.highlight.away {
  color: #F56C6C;
}

.score.penalty {
  text-decoration: line-through;
  opacity: 0.7;
}

.round-result {
  text-align: center;
  margin-top: 10px;
  color: #67C23A;
  font-size: 14px;
  font-weight: bold;
}

.other-rounds {
  background: #FAFAFA;
  border-radius: 6px;
  padding: 12px;
}

.single-round {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #909399;
  padding: 4px 0;
}

.additional-round {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #909399;
  margin: 6px 0;
  padding: 4px 0;
}

.additional-round-title {
  margin-right: 8px;
  color: #606266;
}

.additional-score {
  font-family: monospace;
  font-size: 12px;
  color: #909399;
}
</style>